<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{shengyu}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected:num === 'all'}" @click="change('all')" href="javascript:;">全部</a>
      </li>
      <li>
        <a :class="{selected:num === 'active'}" @click="change('active')" href="javascript:;">未完成</a>
      </li>
      <li>
        <a :class="{selected:num === 'complete'}"  @click="change('complete')" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" v-show="showtime" @click='delbtn'>清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ["arr"],
	data () {
		return {
		num:''	
		}
	},
	computed: {
		shengyu(){
			return this.arr.filter(item => !item.isDone).length
		},
		showtime(){
			return this.arr.some(item => item.isDone)
		}
	},
	methods:{
		delbtn(){
			this.$emit('delfn')
		},
		change(type){
			this.num = type
       this.$emit('change',type)
		}
	}
};
</script>
